<template>
  <el-container>
    <el-header>
      <div class="headerLeft">
        <!-- <img src="https://d1icd6shlvmxi6.cloudfront.net/gsc/YY0FXG/b3/6c/23/b36c237e21ec4480bf026c503a26411c/images/塑造管理/u245.png?token=4dad7c819c8a3f6a64dcb25569f414dea43d6b101fc05229a82443d8e62fdfec" alt=""> -->
        <img src="../assets/images/public/head_logo.png" class="head_logo" alt="">
        <div>
          多媒体内容塑造与智能取证应用平台
        </div>
      </div>
      <div class="headerright">
        <img src="../assets/images/public/head_user.png" class="head_user" alt="">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{this.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">            
            <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      
    </el-header>
    <el-container class="container">
      <el-aside width="isCollapse ? 201px : 64px">
        <el-menu 
          :default-active="checkRouter"
          class="el-menu-vertical-demo"
           @open="handleOpen" 
           @close="handleClose" 
           :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <span class="iconfont icon-app"></span>
              <span slot="title">应用工具</span>
            </template>
            <el-menu-item @click="go('/home/mould')" index="/home/mould">
              塑造管理
            </el-menu-item>
            <el-menu-item @click="go('/home/evidence')" index="/home/evidence">
              取证管理
            </el-menu-item>
          </el-submenu>
          
          <el-submenu index="2">
            <template slot="title">
              <span class="iconfont icon-a-ICON-rizhiguanliCopy21"></span>
              <span slot="title">资源管理</span>
            </template>
            <el-menu-item @click="go('/home/procedure')" index="/home/procedure">
              程序管理
            </el-menu-item>
            <el-menu-item @click="go('/home/multimedia')" index="/home/multimedia">
              多媒体管理
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <span class="iconfont icon-a-ICON-guankongzhongxinCopy31"></span>
              <span slot="title">模型评价</span>
            </template>
            <el-menu-item @click="go('/home/evaluate')" index="/home/evaluate">
              评价管理
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4" v-if="this.id == 1">
            <template slot="title">
              <span class="iconfont icon-a-ICON-jiaoseguanliCopy21"></span>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item @click="go('/home/user')" index="/home/user">
              用户列表
            </el-menu-item>
          </el-submenu>
          
        </el-menu>
      </el-aside>
      <el-main>
        <div class="topSet">
          
          <i v-if="isCollapse" class="el-icon-s-unfold  shrink" @click="checkIsCollapse"></i>
          <i v-else class="el-icon-s-fold shrink" @click="checkIsCollapse"></i>
          <el-breadcrumb separator="/">
            <transition-group>
              <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="item.meta.path">

                <span v-if="index===0" >
                  {{item.meta.title}}
                </span>

                <span v-else-if="!(index===breadList.length-1)" >
                  {{item.meta.title}}
                </span>

                <span v-else-if="index===breadList.length-1" >
                    {{item.meta.title}}
                </span>
              </el-breadcrumb-item>
            </transition-group>
          </el-breadcrumb>
        </div>
        

        <router-view></router-view>
      </el-main>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" class="dialog" :before-close="dialogClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">

        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="ruleForm.oldPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="ruleForm.newPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="ruleForm.confirmPassword" autocomplete="off" type="password"></el-input>
          <span class="span_tip">8~16位,数字、大/小写字母、特殊字符` - = [ ] \ ; ' , . / ~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? ·</span>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')" class="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" class="sure">确定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

<script>
// @ is an alias to /src
import { modifyOwnPassword } from '../api/index'
export default {
  data() {
    var oldPassword = (rule, value, callback) => {
      var passRule = /^[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,16}$/ 
      if (value === '') {
        callback(new Error('请输入旧密码'));
      }else if(!passRule.test(value)){
        callback(new Error('密码格式不正确'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      var passRule = /^[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,16}$/ 
      if (value === '') {
        callback(new Error('请输入密码'));
      }else if(!passRule.test(value)){
        callback(new Error('密码格式不正确'));
      } else {
        if (this.ruleForm.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var passRule = /^[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,16}$/ 
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      }else if(!passRule.test(value)){
        callback(new Error('密码格式不正确'));
      } else {
        callback();
      }
    };
    return {
      isCollapse: false,
      checkRouter: '/home/mould',
      breadList:[{
        meta:{
          title:'应用工具'
        }
      },{
        meta:{
          title:'塑造工具'
        }
      }],
      screenWidth: document.body.clientWidth,
      id: '',
      username:'',
      dialogFormVisible: false,
      ruleForm: {
        oldPassword:'',
        newPassword:'',
        confirmPassword:'',
      },
      rules: {
        oldPassword: [
          {required: true, validator: oldPassword, trigger: 'blur' }
        ],
        newPassword: [
          {required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          {required: true, validator: validatePass2, trigger: 'blur' }
        ],
        
      }
    };
  },
  created(){
    this.setScreen()
    this.getBreadCrumb()
    this.id = sessionStorage.getItem('userId')
    this.username = sessionStorage.getItem('username')
  },
  mounted(){
    const that = this
    window.onresize= () => {
        return (() => {
            window.screenWidth = document.body.clientWidth;
            that.screenWidth = window.screenWidth;
        })();
    }
  },
  watch:{
    $route(){
      this.getBreadCrumb()
    },
    screenWidth(val){
      if(val < 1024){
        this.isCollapse = true
      }else{
        this.isCollapse = false
      }
    }
  },
  
  updated(){
    if(this.$route.path == '/home/mould/mouldadd' || this.$route.path == '/home/mould/mouldetails'){
      this.checkRouter = '/home/mould'
    }else if(this.$route.path == '/home/evidence/evidenceadd' || this.$route.path == '/home/evidence/EvidenceDetails'){
      this.checkRouter = '/home/evidence'
    }else if(this.$route.path == '/home/procedure/procedureadd' || this.$route.path == '/home/procedure/procedureedit' || this.$route.path == '/home/procedure/procedurelook'){
      this.checkRouter = '/home/procedure'
    }else if(this.$route.path == '/home/evaluate/evaluateadd'){
      this.checkRouter = '/home/evaluate'
    }else if(this.$route.path == '/home/user/useradd' || this.$route.path == '/home/user/useredit'){
      this.checkRouter = '/home/user'
    }
},
  methods: {
    changePassword(){
      this.dialogFormVisible = true
    },
    quit(){
      sessionStorage.removeItem('token')
      location.reload();  
    },
    setScreen(){
      this.screenWidth = document.body.clientWidth
      if(this.screenWidth < 900){
        this.isCollapse = true
      }else{
        this.isCollapse = false
      }
    },
    checkIsCollapse(){
      this.isCollapse = !this.isCollapse
    },
    getBreadCrumb(){
      this.checkRouter = this.$route.path
      if(this.$route.path == '/home/mould/mouldadd' || this.$route.path == '/home/mould/mouldetails'){
        this.checkRouter = '/home/mould'
      }else if(this.$route.path == '/home/evidence/evidenceadd' || this.$route.path == '/home/evidence/EvidenceDetails'){
        this.checkRouter = '/home/evidence'
      }else if(this.$route.path == '/home/procedure/procedureadd' || this.$route.path == '/home/procedure/procedureedit'  || this.$route.path == '/home/procedure/procedurelook'){
        this.checkRouter = '/home/procedure'
      }else if(this.$route.path == '/home/evaluate/evaluateadd'){
        this.checkRouter = '/home/evaluate'
      }else if(this.$route.path == '/home/user/useradd' || this.$route.path == '/home/user/useredit'){
        this.checkRouter = '/home/user'
      }
      
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.breadList = matched
    },
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    },
    go(e){
      this.checkRouter = e
      this.$router.push(e)
    },
    dialogClose(done){
      this.$refs.ruleForm.resetFields();
      done()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let oldPassword = this.ruleForm.oldPassword
          let newPassword = this.ruleForm.newPassword
          let confirmPassword = this.ruleForm.confirmPassword
          let params = {oldPassword,newPassword,confirmPassword}
          modifyOwnPassword(params).then(res=>{
            console.log(res)
            if(res.data.status == 0){
              this.$message({
                message: '密码修改成功',
                type: 'success'
              });
              setTimeout(()=>{
                sessionStorage.removeItem('token')
                location.reload();
              },1000)
              
            }else{
              this.$message.error(res.data.message)
            }
          })
          // this.$refs[formName].resetFields();
          // this.dialogFormVisible = false
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false
    }
  }
  
}
</script>
<style lang='less' scoped>
.cancel{
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 2px;
  width: 122px;
}
.sure{
  color: #63E9FF;
  border: 1px solid #00CEF0;
  background-color: rgba(49, 203, 236, 0.1400);
  border-radius: 2px;
  width: 122px;
}
.is-vertical{
  height: 100vh;
  /deep/.el-header{
    width: 100%;
    height: 100%;
    background-color: #00182E;
    color: #fff;
  }
  .el-menu-vertical-demo{
    height: 100%;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
/deep/.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url('../assets/images/public/head_bac.png');
    background-size: 100% 100%;
    .headerLeft{
      display: flex;
      align-items: center;
      .head_logo{
        width: 39px;
        height: 36px;

      }
      >img{
        margin-right: 10px;
      }
    }
    .headerright{
      display: flex;
      align-items: center;
      .head_user{
        width: 36px;
        height: 36px;
        margin-right: 18px;
      }
      .head{
        margin-right: 10px;
      }
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #fff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
}
/deep/.el-menu-item.is-active {
    color: #409EFF;
    background-color: #E6F7FF;
    border-right:2px solid #1890FF ;
}
.el-main {
    background-color: #EBEFF2;
    padding: 0;
    min-width: 823px;
    /deep/.el-breadcrumb {
      height: 45px;
      background-color: #33384F;
      line-height: 45px;
      padding-left: 15px;
    }
    /deep/.el-breadcrumb__inner{
      color: #fff!important;
    }
    .topSet{
      background-color: #33384F;
      display: flex;
      align-items: center;
      color: #fff;
      padding-left: 15px;
      box-sizing: border-box;
      height: 48px;
      .shrink{
        font-size: 24px;
        cursor: pointer;
      }
    }
}
.container {
    min-width: 1024px;
    ::-webkit-scrollbar {
        width:2px;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(255,255,255,1);
        border-radius:10px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(255,255,255,1);
        -webkit-box-shadow:inset006pxrgba(255,255,255,1);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background:#fff;
    }
    /deep/.el-menu-item.is-active {
        color: #1BD6FD;
        border-right: 4px solid #04D4FF;
        background: linear-gradient(90deg, rgba(51,217,249,0) 0%, rgba(51,218,250,0.6100) 100%);
        // opacity: 0.49;
        background-color: transparent;
    }
    /deep/.el-menu-vertical-demo {
      background-image: url('../assets/images/public/nav_bac.png');
      background-size: 100% 100%;
      color: #fff;
    }
    /deep/.el-submenu__title{
      color: #fff;
      height: 47px;
    }
    /deep/.el-submenu__title i{
      color: #fff;
    }
    /deep/.el-submenu__icon-arrow {
      margin-top: -2px;
    }
    /deep/.el-menu {
      background-color: transparent;
      border-right: 0;
    }
    /deep/.el-menu-item {
      color: #fff;
      background-color: #393D4D;
    }
    /deep/.el-submenu__title:hover {
      background: linear-gradient(90deg, rgba(51,217,249,0) 0%, rgba(51,218,250,0.6100) 100%);
    }
    /deep/.el-menu-item:focus, .el-menu-item:hover {
      background: linear-gradient(90deg, rgba(51,217,249,0) 0%, rgba(51,218,250,0.6100) 100%);
    }
    /deep/.iconfont {
      font-size: 18px;
      margin-right: 10px;
    }
}
.dialog{
  /deep/.el-dialog {
      margin-top: 25vh!important;
  }
  /deep/.el-dialog__header{
    background-color: #282C41;
  }
  /deep/.el-dialog__title {
    color: #fff;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  /deep/.el-dialog__body {
    color: #fff;
    background-color: #282C41;
    background-image: url('../assets/images/linebright.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  /deep/.el-form-item__label {
    color: #fff;
  }
  /deep/.el-input__inner {
    background-color: #4F5367;
    border: 1px solid #7A7F8E;
    color: #fff;
  }
  .span_tip{
    font-size: 12px;
  }
  /deep/.el-dialog__footer {
    background-color: #282C41;
    background-image: url('../assets/images/linebright.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
</style>
